<script setup>

//  用我们的js来完成数据处理，把处理以后的结果展示在html当中

/**
 * html 模板语言
 * 
 *  js  : let(局部变量) var(全局变量) const (常量)
 * 
 * {{写的是js里面的变量}}
 * 
 * vue.js 双向绑定的mvvm - js语言  
 * 
 *  v-bind: 表示将html里面的属性值 与变量绑定 --> 单向绑定
 *   响应式   ： ref();
 * 
 * 
 * 传统js :   1 \ 找到方法承载体，  2 ： 分析事件   3： 你要做什么 ？ 
 * 
 * vuejs :   2 mvvm方式改变变量，以致改变dom元素状态
 */
import { ref, reactive, onBeforeMount, onMounted } from 'vue'
import axios from 'axios'

//message 是一个响应式变量
let message = ref("第一次来到vue代码当中");

//声明ref响应式  对js开放.value
let ist = ref(true);

//第二个响应式函数   reactive()
const changeShow = () => {
  ist.value = !ist.value;
}
let data = reactive({
  code: 200,
  msg: '操作已成功!!!',
  data: [
    { stuno: 1001, stuname: '张三丰0', sex: '男' },
    { stuno: 1002, stuname: '张三丰1', sex: '男' },
    { stuno: 1003, stuname: '张三丰2', sex: '男' },
    { stuno: 1004, stuname: '张三丰3', sex: '男' },
    { stuno: 1005, stuname: '张三丰4', sex: '男' },
    { stuno: 1006, stuname: '张三丰6', sex: '男' },
    { stuno: 1007, stuname: '张三丰7', sex: '男' },
    { stuno: 1008, stuname: '张三丰8', sex: '男' }
  ]
});

let empData = ref({});
console.log(empData, "开始打印");

onMounted(() => {
  console.log("mounted");
  initData();
});


let initData = () => {
  axios({
    // 表示我们的请求地址  ， 表示的是node的api接口
    url: '/api/employee/list',
    method: 'get',
    params: {
      pageNum: 1,
      pageSize: 10
    }
  }).then((resData) => {
    empData.value = resData.data.data.list;
    console.log(empData, "访问后台以后的数据 ");
  }).catch(error => {
    console.log(error);

  });
}


</script>

<template>
  <!-- 员工表格 -->
  <table>
    <tr>
      <th>员工编号</th>
      <th>员工姓名</th>
      <th>员工性别</th>
      <th>员工学历</th>
      <th>入职日期</th>
    </tr>
    <tr v-for="emp in empData">
      <td>{{ emp.eid }}</td>
      <td>{{ emp.ename }}</td>
      <td>{{ emp.sex }}</td>
      <td>{{ emp.edu }}</td>
      <td>{{ emp.employed }}</td>
    </tr>
  </table>

  <table>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    <tr v-for="stu in data.data">
      <td>{{ stu.stuno }}</td>
      <td>{{ stu.stuname }}</td>
      <td>{{ stu.sex }}</td>
    </tr>
  </table>

  <input type="text" v-model="message" />
  {{ message }}

  <button v-on:click="changeShow()">点我</button>
  <div v-show="ist">
    你能看到我了
  </div>

</template>

<style scoped>
table {
  width: 100%;
  height: 300px;
  border: 1px solid blue;
  background-image: linear-gradient(to right, rgb(184, 201, 168), rgb(88, 153, 184), rgb(157, 202, 98), rgb(97, 158, 201));
}

table:hover {
  box-shadow: 3px 3px 3px gray;
}
</style>

<!-- .vue文件，是由三个部分组成的一个组件
template : 编写html
script   : 编写js
stype    :css -->
